<template>
  <div class="courseDialog">
    <!-- 选择课程弹窗 -->
    <el-dialog :visible.sync="dialog" :before-close="handleClickCancel" title="每周精品课程" width="600px">
      <div class="search">
        <el-input v-model="dialogData.search" clearable placeholder="课程名称" style="width:200px" @keyup.enter.native="handleFilter"/>
        <el-button type="primary" style=" padding:10px;" @click="handleFilter">搜索</el-button>
      </div>
      <div class="main-body">
        <ul class="course-grids">
          <li
            v-for="(item,index) in dialogData.subject"
            :key="index"
            class="course-grid"
            @click="handleClickSelect(item)"
          >
            <div class="grid-body">
              <img :src="item.middlePicture" alt class="img">
              <span class="title">{{ item.title }}</span>
            </div>
          </li>
        </ul>
      </div>
      <pagination
        :total="classLength"
        :current-page="dialogData.currentpage"
        :page-size="dialogData.pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClickCancel">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formLabelWidth: {
      type: String,
      default: '120px'
    }
  },
  computed: {
    classLength() {
      return this.dialogData.total
    }
  },
  methods: {
    handleSizeChange(val) {
      this.dialogData.currentpage = 1
      this.dialogData.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
      this.handleFilter()
    },
    handleCurrentChange(val) {
      this.dialogData.currentpage = val.value
      if (this.dialogData.pagesize >= 20) {
        scrollTo(50, 800)
      }
      this.handleFilter()
    },
    // 向父组件事件changeVisiable和布尔值false 父组件用@changeVisiable接收事件 并触发父组件的一个函数 @changeVisiable="changeVisiable"
    handleClickCancel() {
      this.$emit('changeVisiable', false)
    },
    handleClickSelect(item) {
      this.$emit('handleClickSelect', item)
    },
    handleFilter() {
      this.$emit('handleSearch', this.dialogData.search, this.dialogData.currentpage, this.dialogData.pagesize)
    }
  }
}
</script>

<style lang="scss" scoped>
  .courseDialog{
    .el-dialog {
      border-radius: 5px;
      width: 600px;
      height: 660px;
      .class-pagination {
        width: 100%;
        text-align: center;
        margin-top: 30px;
      }
      .search {
        width: 100%;
        height: 36px;
      }
      .main-body {
        width: 100%;
        height: 360px;
        .course-grids {
          list-style: none;
          margin: 0 -15px 0 0;
          padding: 0;
          .course-grid {
            display: inline-block;
            vertical-align: top;
            margin: 15px 15px 15px 0;
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            cursor: pointer;
            .grid-body {
              position: relative;
              width: 170px;
              display: block;
              border-radius: 4px;
              color: #353535;
              .img {
                width: 100%;
                height: 95px;
              }
              .title {
                display: block;
                padding: 10px;
                min-height: 52px;
                color: #555;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }
</style>
